<template>  
  <view class="container">  
    <view class="tabs" v-model="activeTab" style="display: flex; flex-direction: column;" >  
      <button class="tab-item" v-for="(tab, index) in tabs" :key="index" style="width: 100%;"@click="handleTabClick(index)">  
        <radio :value="tab.value" /> {{ tab.text }}  
        <text v-if="tab.updated" class="updated-indicator">·有更新</text>  
      </button>  
    </view>  
  </view>  
</template>  
  
<script> 
export default {  
  data() {  
    return {  
      activeTab: 'moreInfo', // 默认选中的选项卡  
	  currentPage: 0, // 当前页面索引
      tabs: [  
        { text: '招生能力测试', value: 'test', updated: true },  
        { text: '我的活动', value: 'myActivities', updated: true },  
        { text: '我的组员', value: 'myMembers', updated: true, beta: true }, // 注意：这里添加了beta字段来表示是β版本，实际中可能需要特殊处理  
        { text: '报名审批', value: 'approval', updated: true },  
        { text: '招宣资料', value: 'materials', updated: true },  
      ],  
    };  
  },  
  //methods: {  
    //goToActivitySquare() {  
      // // 跳转到活动广场页面的逻辑  
      // uni.navigateTo({  
      //   url: '/pages/activitySquare/activitySquare'  
      // });  
    //},  
    //goToInformationSquare() {  
      // // 跳转到招宣广场页面的逻辑  
      // uni.navigateTo({  
      //   url: '/pages/propagandaSquare/propagandaSquare'  
      // });  
   // },  
   methods: {
     handleTabClick(index) {
       // 在这里处理点击事件，例如切换显示的内容或导航到不同的页面
       console.log('Tab clicked:', index);
       this.currentPage = index;
   
       switch (index) {
         case 0:
           uni.navigateTo({
             url: '/pages/test/test' // 招生能力测试页面的路径
           });
           break;
         case 1:
           uni.navigateTo({
             url: '/pages/myActivities/myActivities' // 我的活动页面的路径
           });
           break;
         case 2:
           uni.navigateTo({
             url: '/pages/myMembers/myMembers' // 我的组员页面的路径
           });
           break;
         case 3:
           uni.navigateTo({
             url: '/pages/approval/approval' // 报名审批页面的路径
           });
           break;
         case 4:
           uni.navigateTo({
             url: '/pages/materials/materials' // 招宣资料页面的路径
           });
           break;
         default:
           uni.navigateTo({
             url: '/pages/registered/registered' // registered页面的路径
           });
           break;
       }
     },
   },
 
};     
</script>  
  
<style scoped>  
.container {  
	border-radius: 12px;
	width: 430px;
	height: 900px;
	background-image: url("../../static/bg4.png");
  /* 容器样式 */  
}  
.tabs {  
  /* 选项卡样式 */  
  margin-top: 0px;
  width: 430px;
  height: 890px;
  box-shadow: 0 3px 6px 0 #c9cfd980;
  border-radius: 8px; 
  /* 其他样式 */  
}  
.tab-item {  
	margin-top: 40px;
	width: 430px;
	height: 76px;
	box-shadow: 0 3px 6px 0 #00ffff80;
	border-radius: 8px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 20px;
	color: #000000;
	letter-spacing: 0px;
	text-align: start;
  /* 选项卡项的样式 */  
}  
.updated-indicator {  
  /* 更新指示符的样式 */  
  width: 36px;
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #00ff00;
  letter-spacing: 0;
  margin-left: 180px;
}  
.bottom-nav button {  
  /* 底部导航栏按钮的样式 */  
  flex: 1;  
  text-align: center;  
  /* 其他样式 */  
}  
</style>
